<template>
	<view class="container">
		<Page :page-function="getRechargePage" v-model:dataList="rechargeList" v-model:page="page">
			<view class="recharge-item" v-for="item in rechargeList" :key="item.id">
				<view class="up">
					<view class="channel">
						支付宝
					</view>
					<view class="status" :class="getClassByStatus(item.status)">
						{{ getDriverRechargeNameByCode(item.status) }}
					</view>
				</view>
				<view class="down">
					<view class="datetime">
						{{ formatDatetime(item.createTime) }}
					</view>
					<view class="amount">
						￥{{ formatAmount(item.amount) }}
					</view>
				</view>
				<view class="btn-container" v-if="driverRechargeStatusEnum.PENDING.value === item.status">
					<view class="btn btn-cancel" @tap="handleCancel(item.id)">
						取消
					</view>
					<view class="btn btn-pay" @tap="handleContinue(item.id)">
						去支付
					</view>
				</view>
			</view>
		</Page>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getRechargePage, cancelRecharge, continueRecharge } from '@/api/recharge.js'
import { formatDatetime } from '@/utils/datetimeUtil.js'
import { getDriverRechargeNameByCode, driverRechargeStatusEnum } from '@/utils/enums.js'
import { useUserStore } from '@/stores/userStore.js'
import Page from '@/components/page.vue'
import { formatAmount } from '@/utils/amountUtil.js'

const driver = useUserStore()

const rechargeList = ref([])

const page = reactive({
	pageNum: 1,
	pageSize: 10
})

function getClassByStatus (status) {
	switch (status) {
		case driverRechargeStatusEnum.CANCEL.value:
			return 'cancel'
		case driverRechargeStatusEnum.PENDING.value:
			return 'pendding'
		case driverRechargeStatusEnum.TIMEOUT.value:
			return 'timeout'
		case driverRechargeStatusEnum.PAYED.value:
			return 'payed'
		default:
			return ''
	}
}

function handleCancel (id) {
	uni.showModal({
		title: '提示',
		content: `确认取消这笔充值订单吗？`,
		success: (res) => {
			if (res.confirm) {
				cancelRecharge(id).then(res => {
					if (res.data === true) {
						const obj = rechargeList.value.find(v => v.id === id)
						obj.status = driverRechargeStatusEnum.CANCEL.value
						uni.showToast({
							icon: 'none',
							title: '取消成功'
						})
					}
				})
			}
		}
	})
}

function handleContinue (id) {
	continueRecharge(id).then(res => {
		uni.requestPayment({
			provider: 'alipay',
			orderInfo: res.data,
			success: (resp) => {
				const obj = rechargeList.value.find(v => v.id === id)
				obj.status = driverRechargeStatusEnum.PAYED.value
				uni.showToast({
					icon: 'none',
					title: '支付成功'
				})
				driver.refreshCurrentDriver()
			},
			fail: (err) => {
				uni.showToast({
					icon: 'none',
					title: '支付失败'
				})
			}
		})
	})
}

</script>

<style scoped lang="scss">

view {
	box-sizing: border-box;
}

.container {
	min-height: 100vh;
	.recharge-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid #ccc;
		.up {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			.subject {
				
			}
			.status {
				font-size: 28rpx;
				color: #666;
			}
			.payed {
				color: rgba($uni-color-primary, 0.8);
			}
			.cancel, .pendding, .timeout {
				color: #666;
			}
		}
		.down {
			margin-top: 20rpx;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			.datetime {
				color: #666;
				font-size: 28rpx;
			}
			.amount {
				font-weight: bold;
				color: $uni-color-primary;
			}
		}
		.btn-container {
			margin-top: 20rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			.btn {
				font-size: 24rpx;
				padding: 10rpx 30rpx;
				border-radius: 8rpx;
			}
			.btn-pay {
				color: $uni-color-primary;
				background-color: rgba($uni-color-primary, 0.1);
				&:active {
					background-color: rgba($uni-color-primary, 0.15);
				}
			}
			.btn-cancel {
				margin-right: 20rpx;
				color: #333;
				background-color: rgba(#444, 0.1);
				&:active {
					background-color: rgba(#444, 0.15);
				}
			}
		}
		
	}
	
}

</style>